<template>
  <div v-if="selectWg && Object.keys(selectWg).length > 0">
    <el-form label-position="top">
      <el-collapse v-model="wgCollapse" accordion>
        <el-collapse-item name="base" title="属性设置">
          <BaseConfig :selectWg="selectWg"/>
        </el-collapse-item>
        <el-collapse-item name="tag" v-if="selectWg.title != null" title="标签设置">
          <TagConfig :selectWg="selectWg"/>
        </el-collapse-item>
       <el-collapse-item name="validate" v-if="selectWg" title="表单校验">
          <Validate :selectWg="selectWg"/>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
  <div v-else style="text-align: center;">
    请选择一个元素
  </div>
</template>

<script>
import { mapState } from 'vuex';
import BaseConfig from "./common"
import TagConfig from "./tag-config"
import Validate from "./validate"

export default {
  components: {
    BaseConfig,
    TagConfig,
    Validate
  },
  computed: {
    wgCollapse: {
      get() {
        return this.$store.state.formCreate.wgCollapse
      },
      set(val) {
        this.$store.commit('setWgCollapse', val)
      }
    },
    ...mapState({
      selectWg: state => state.formCreate.selectWg
    })
  },
  methods: {

  }
}
</script>

<style>
  .ivu-collapse-content{
    padding:0 10px;
  }
</style>
